<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据预处理管道系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-cogs me-2"></i>
                数据预处理管道系统
            </a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text" id="status-indicator">
                    <i class="fas fa-circle text-secondary me-1"></i>
                    就绪
                </span>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container mt-4">
        <!-- 步骤指示器 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="step-indicator">
                    <div class="step active" id="step-1">
                        <div class="step-number">1</div>
                        <div class="step-title">上传文件</div>
                    </div>
                    <div class="step" id="step-2">
                        <div class="step-number">2</div>
                        <div class="step-title">配置处理</div>
                    </div>
                    <div class="step" id="step-3">
                        <div class="step-number">3</div>
                        <div class="step-title">开始处理</div>
                    </div>
                    <div class="step" id="step-4">
                        <div class="step-number">4</div>
                        <div class="step-title">查看结果</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤1: 文件上传 -->
        <div class="step-content" id="content-step-1">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-upload me-2"></i>
                        步骤1: 上传Excel文件
                    </h5>
                </div>
                <div class="card-body">
                    <div class="upload-area" id="upload-area">
                        <div class="upload-content">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <h5>拖拽文件到此处或点击选择</h5>
                            <p class="text-muted">支持 .xlsx 和 .xls 格式，最大100MB</p>
                            <input type="file" id="file-input" accept=".xlsx,.xls" style="display: none;">
                            <button class="btn btn-primary" onclick="document.getElementById('file-input').click()">
                                <i class="fas fa-folder-open me-2"></i>选择文件
                            </button>
                        </div>
                    </div>
                    
                    <!-- 文件信息显示 -->
                    <div id="file-info" class="mt-3" style="display: none;">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-check-circle me-2"></i>文件上传成功</h6>
                            <div id="file-details"></div>
                        </div>
                    </div>
                    
                    <!-- 数据预览 -->
                    <div id="data-preview" class="mt-3" style="display: none;">
                        <h6><i class="fas fa-table me-2"></i>数据预览</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered" id="preview-table">
                                <!-- 动态生成 -->
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤2: 配置处理 -->
        <div class="step-content" id="content-step-2" style="display: none;">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        步骤2: 配置预处理参数
                    </h5>
                </div>
                <div class="card-body">
                    <!-- 层数选择 -->
                    <div class="mb-4">
                        <label for="layer-count" class="form-label">
                            <i class="fas fa-layer-group me-2"></i>预处理层数
                        </label>
                        <select class="form-select" id="layer-count">
                            <option value="1">1层</option>
                            <option value="2">2层</option>
                            <option value="3" selected>3层</option>
                            <option value="4">4层</option>
                            <option value="5">5层</option>
                        </select>
                        <div class="form-text">选择预处理的层数，每层可以选择多个方法</div>
                    </div>

                    <!-- 可用方法列表 -->
                    <div class="mb-4">
                        <h6><i class="fas fa-list me-2"></i>可用的预处理方法</h6>
                        <div id="available-methods" class="row">
                            <!-- 动态生成 -->
                        </div>
                    </div>

                    <!-- 层级配置 -->
                    <div id="layer-config">
                        <!-- 动态生成 -->
                    </div>

                    <!-- 组合摘要 -->
                    <div id="combination-summary" class="mt-4" style="display: none;">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-calculator me-2"></i>组合摘要</h6>
                            <div id="combination-details"></div>
                        </div>
                    </div>

                    <!-- 配置按钮 -->
                    <div class="mt-4">
                        <button class="btn btn-success" id="configure-btn" onclick="configureProcessing()">
                            <i class="fas fa-check me-2"></i>确认配置
                        </button>
                        <button class="btn btn-secondary ms-2" onclick="goToStep(1)">
                            <i class="fas fa-arrow-left me-2"></i>返回上一步
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤3: 开始处理 -->
        <div class="step-content" id="content-step-3" style="display: none;">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-play me-2"></i>
                        步骤3: 开始处理
                    </h5>
                </div>
                <div class="card-body">
                    <!-- 配置确认 -->
                    <div id="config-confirmation" class="mb-4">
                        <!-- 动态生成 -->
                    </div>

                    <!-- 处理控制 -->
                    <div class="mb-4">
                        <button class="btn btn-primary btn-lg" id="start-processing-btn" onclick="startProcessing()">
                            <i class="fas fa-play me-2"></i>开始处理
                        </button>
                        <button class="btn btn-secondary ms-2" onclick="goToStep(2)">
                            <i class="fas fa-arrow-left me-2"></i>返回配置
                        </button>
                    </div>

                    <!-- 进度显示 -->
                    <div id="processing-progress" style="display: none;">
                        <h6><i class="fas fa-spinner fa-spin me-2"></i>处理进度</h6>
                        <div class="progress mb-3">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                 id="progress-bar" role="progressbar" style="width: 0%">
                                0%
                            </div>
                        </div>
                        <div id="progress-details" class="small text-muted">
                            准备开始处理...
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤4: 查看结果 -->
        <div class="step-content" id="content-step-4" style="display: none;">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        步骤4: 处理结果
                    </h5>
                </div>
                <div class="card-body">
                    <!-- 结果统计 -->
                    <div id="result-statistics" class="row mb-4">
                        <!-- 动态生成 -->
                    </div>

                    <!-- 文件列表 -->
                    <div id="result-files">
                        <h6><i class="fas fa-download me-2"></i>生成的文件</h6>
                        <div id="file-list">
                            <!-- 动态生成 -->
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="mt-4">
                        <button class="btn btn-primary" onclick="openOutputDirectory()">
                            <i class="fas fa-folder-open me-2"></i>打开保存目录
                        </button>
                        <button class="btn btn-success ms-2" onclick="startNew()">
                            <i class="fas fa-plus me-2"></i>开始新的处理
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div id="loading-overlay" style="display: none;">
        <div class="loading-content">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="mt-3">处理中，请稍候...</div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="toast" class="toast" role="alert">
            <div class="toast-header">
                <i class="fas fa-info-circle text-primary me-2"></i>
                <strong class="me-auto">系统通知</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toast-message">
                <!-- 动态内容 -->
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>